<template>
	<view class="">
		<view v-if="userInfo">
			<!-- 登录成功显示的部分 -->
			<h2 style="text-align: center;margin: 60rpx auto;font-size: 64rpx;">欢迎登录！</h2>
			<p style="text-align: center;">{{userInfo.userName}}</p>
		</view>
		<view v-else>
			<!-- 注册登录表单部分 -->
			<h2 style="text-align: center;margin: 60rpx auto;font-size: 64rpx;">注册登录</h2>
			<form action="">
				<label for="">账号：<input type="text" v-model='userForms.userName'></label>
				<view class="" style="height: 20rpx;">
					
				</view>
				<label for="">密码：<input type="text" v-model="userForms.password"></label>
				<button type="submit" @click="handleLogin">登录</button>
			</form>
		</view>
	</view>
</template>

<script>
import { mapState ,mapMutations} from 'vuex';
	export default {
		data() {
			return {
				// 注册登录表单信息
				userForms:{
					userName:null,
					password:null
				},
			};
		},
		computed:{
			...mapState(['userInfo'])
		},
		methods:{
			...mapMutations(['handleSetUserInfo']),
			handleLogin(){
				// 发起注册登录请求
				uni.request({
					url:'http://192.168.204.211:3000/login',
					method:"POST",
					data:{...this.userForms},
					success: (res) => {
						// console.log(res.data);
						if(res.data.state==200){
							// 存储用户信息
							this.handleSetUserInfo(res.data.data)
						}
					}
				})
				return false;
			}
		}
	}
</script>

<style lang="less">
	label{
		display: flex;
		justify-content: center;
		input{
			border: 1rpx solid black;
		}
	}
	button{
		margin-top: 20rpx;
	}
</style>
